﻿<!DOCTYPE HTML>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>扫码登录</title>
    <style>
        body {
            margin: 0;
            padding: 0
        }

        .demo {
            /*width: 400px;*/
            margin: 40px auto 0 auto;
            /*min-height: 250px;*/
        }

        .demo p {
            line-height: 30px
        }

        #code {
            margin-top: 10px
        }

        .wraper {
            position: relative;
            z-index: 1;
            width: 520px;
            padding: 20px;
            background: #fff;
            border: 1px solid #ddd;
            margin: 0 auto;

        }

        .ba_Img {
            z-index: 0;
        }
    </style>
    <script type="text/javascript" th:src="${contextPath}+'/js/jquery-1.9.1.js'" src="/js/jquery-1.9.1.js"></script>
    <script type="text/javascript" th:src="${contextPath}+'/js/jquery.qrcode.min.js'" src="/js/jquery.qrcode.min.js"></script>
    <script type="text/javascript" th:src="${contextPath}+'/js/jquery.jsonp-2.4.0.min.js'" src="/js/jquery.jsonp-2.4.0.min.js"></script>

</head>
<body>
<input id="wsIP" type="hidden" th:value="${wsIP}">
<input id="wsLocalIP" type="hidden" th:value="${wsLocalIP}">
<input id="wsPort" type="hidden" th:value="${wsPort}">
<div th:text="${wsIP}+'：'+${wsPort}">当前服务interIP与端口号</div>
<div th:text="${wsLocalIP}+'：'+${wsPort}">当前服务localIP与端口号</div>
<form id="autoLoginForm" method="post" th:action="${contextPath}+'/third/wxDemo/byWxLogin'" action="/third/wxDemo/byWxLogin">
    <input type="text" id="sysCode" name="sysCode">
    <input type="text" id="openid" name="openid">
    <input type="text" id="nickname" name="nickname">
    <input type="text" id="headImgUrl" name="headImgUrl">
    <input type="text" id="timestamp" name="timestamp">
    <input type="text" id="signature" name="signature">
</form>

<div class="ba_Img" style="position: absolute;top:0;bottom: 0;left:0;right:0"><img th:src="${contextPath}+'/img/background.png'" src="/img/background.png"/></div>

<div class="wraper">
    <div id="main">
        <div class="demo">
            <div id="code" style="display: none"></div>
            <div id="imgQrDiv" style="text-align: center; ">
                <p></p>
                <p style="font-size: 20px; color:#de491a;">扫码登录<br/>
                    <span id="scanQrCodeLoginManageNameEm"></span><br/>
                </p>
            </div>
            <div id="scanQrSuccessDiv" style="text-align: center;  display: none;">
                <span class="display:inline-block">
                    <img width="300" height="300" id="headImgUrl_img" src="" alt="扫码人头像"/>
                </span>
                <p style="color:#de491a">扫码成功</p>
                <p style="color:#de491a">请在手机上点击确认已登录</p>
                <p style="text-align: center">
                    <span onclick="switchAccount()" style="width: 150px;border:1px solid #ddd;border-radius:3px;display: inline-block;text-align: center;height: 30px;line-height:30px; background-color: #ffffff">切换账户</span>
                </p>
            </div>
        </div>
    </div>
</div>
</body>

<script type="text/javascript">
    //websocket连接地址,web-login的最后参数为2
    const wsIP = document.getElementById("wsIP").value;
    const wsPort = document.getElementById("wsPort").value;
    // let webSocketUrl = "ws://"+wsIP+":"+wsPort+"/wcConnector/qrLoginWebsocket/clan/2";
    let webSocketUrl = "wss://mini.ysp2021.cn:443/wcConnector/qrLoginWebsocket/clan/2";
    console.log("webSocketUrl="+webSocketUrl);
    $(function () {
        var ws = new WebSocket(webSocketUrl);
        if ("WebSocket" in window) {
            // 打开一个 web-login的socket连接
            ws.onopen = function () {
                const wsMsg = {
                    code: 210
                };
                ws.send(JSON.stringify(wsMsg));
            };
            ws.onmessage = function (evt) {
                let wsMsg = JSON.parse(evt.data);
                console.log(wsMsg)
                if (wsMsg.code == 121) {
                    //㞡示登录二维码
                    let qrCodeLinkUrl = wsMsg.msgData;
                    console.log("将展示的二维码信息：qrCodeLinkUrl:"+qrCodeLinkUrl);
                    $('#code').qrcode(qrCodeLinkUrl);
                    //获取网页中的canvas对象
                    let myCanvas = document.getElementsByTagName('canvas')[0];
                    //将转换后的img标签插入到html中
                    let img = convertCanvasToImage(myCanvas);
                    $('#imgQrDiv p:first-child').append(img);//imgQrDiv表示你要插入的容器id
                }else if(wsMsg.code == 123){
                    console.log("收到，用户扫成功，本地展示扫码人头像昵称");
                    let fans = JSON.parse(wsMsg.msgData);
                    $("#imgQrDiv").hide();
                    $("#headImgUrl_img").attr("src", fans.headImgUrl);
                    $("#scanQrSuccessDiv").show();
                    document.getElementById("sysCode").value=fans.sysCode;
                    document.getElementById("openid").value=fans.openid;
                    document.getElementById("nickname").value=fans.nickname;
                    document.getElementById("headImgUrl").value=fans.headImgUrl;
                    document.getElementById("timestamp").value=fans.timestamp;
                    document.getElementById("signature").value=fans.signature;
                }else if(wsMsg.code == 124){
                    //确认登录后台系统
                    console.log("收到，马上自动登录，你可能看不到这条消息了");
                    const form = document.getElementById('autoLoginForm');
                    form.submit();
                }else if(wsMsg.code == 125){
                    //取消登录后台系统
                    console.log("收到，取消本次登录，将重置二维码");
                    let qrCodeLinkUrl = wsMsg.msgData;
                    $('#code').qrcode(qrCodeLinkUrl);
                    let myCanvas = document.getElementsByTagName('canvas')[0];
                    let img = convertCanvasToImage(myCanvas);
                    $('#imgQrDiv p:first-child').append(img);
                } else {
                    $("#textarea").prepend("<br/>" + wsMsg)
                }
            };

            ws.onclose = function () {
                // 关闭 websocket
                console.log("ws.onclose已触发");
            };
        } else {
            // 浏览器不支持 WebSocket
            alert("您的浏览器不支持 WebSocket!");
        }
    });

    //从 canvas 提取图片 image
    function convertCanvasToImage(canvas) {
        //新Image对象，可以理解为DOM
        var image = new Image();
        // canvas.toDataURL 返回的是一串Base64编码的URL，当然,浏览器自己肯定支持
        // 指定格式 PNG
        image.src = canvas.toDataURL("image/png");
        image.width = "300";
        image.height = "300";
        return image;
    }


    $(function () {
        var winW = $(window).width()
        var winH = $(window).height()
        $(".ba_Img img").css({"width": winW, "height": winH})
    })

    //切换账号，直接刷新页面
    function switchAccount() {
        window.location.reload();
    }

    function sendmsg() {
        ws.send($("#receiver").val() + "|---|" + $("#txt_input").val());
    }

</script>
</html>